<%@ taglib uri="/struts-tags" prefix="s"%>

<header class="padding-bottom" id="header-homepage">
	<div class="row homepage-nav-container">
		<nav class="homepage-nav">
			<ul class="no-bullet inline-list">
				<li><a href="http://www.shiplanet.com">How it
						Works</a></li>
				<li><a class="topnav-btn" rel="nofollow"
					href="http://www.shiplanet.com">Signup</a></li>
				<li><a class="topnav-btn" rel="nofollow"
					href="http://www.shiplanet.com">Login</a></li>
			</ul>
		</nav>
	</div>
	<nav class="top-bar mobile-nav" style="">
		<ul class="title-area">
			<!-- Title Area -->
			<li class="name mobile-nav-background">
				<h1>
					<a href="http://www.shiplanet.com"><img class="mobile-logo"
						src="/images/shiplanet-logo-header-w80.png" alt=""></a>
				</h1>
			</li>
			<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
			<li class="toggle-topbar menu-icon"><a
				href="http://www.shiplanet.com"><span>Menu</span></a></li>
		</ul>


		<section class="top-bar-section mobile-nav-dropdown">
			<!-- Left Nav Section -->
			<ul class="left">
				<li class="divider"></li>
				<li class="has-form"><s:form action="searching" namespace="/"
						method="GET" cssClass="ng-pristine ng-valid" theme="simple">
						<div class="row collapse">
							<div class="small-8 columns">
								<s:textfield name="keyword" cssClass="large-search" id="q"
									placeholder="search..." />
							</div>
							<div class="small-4 columns">
								<button class="small-margin-left small">
									<i class="fa fa-search"></i>
								</button>
							</div>
						</div>
					</s:form></li>
				<li class="divider"></li>
				<li><a href="http://www.shiplanet.com">Browse
						Listings</a></li>
				<li class="divider"></li>
				<li><a class="topnav-btn" rel="nofollow"
					href="http://www.shiplanet.com">Signup</a></li>
				<li class="divider"></li>
				<li><a class="topnav-btn" rel="nofollow"
					href="http://www.shiplanet.com">Login</a></li>
				<li class="divider"></li>
				<li><a href="http://www.shiplanet.com">How It
						Works</a></li>
				<li class="divider"></li>
				<li><a href="http://www.shiplanet.com">Contact</a></li>
			</ul>
		</section>
	</nav>
	<div class="row">
		<div
			class="column large-2 medium-3 homepage-big-logo no-margin-bottom">
			<img src="/images/shiplanet-top-logo-home-w100.png" alt="">
		</div>
		<div class="column large-3 medium-3 medium-pull-6 pull-7 neg-margin">
			<h3 class="inverse thin large-message small-padding-top large-slogan">
				<em> The best marine & offshore marketplace </em>
			</h3>
		</div>
	</div>
	<div class="row collapse">
		<div class="column large-8 medium-12 push-4 medium-push-0">
			<div class="row collapse extra-small-padding-top">
				<div class="text-center column large-12">
					<div class="header-callout2 clearfix box-shadow">
						<h1 class="inverse small-padding-top shadow ">
							<i class="fa fa-search"></i> Find Items &amp; Products
						</h1>
						<s:form action="searching" namespace="/" theme="simple"
							method="GET"
							cssClass="custom homepage-search-form clearfix ng-pristine ng-valid">
							<div class="row collapse">
								<div class="column large-6 text-column">
									<s:textfield name="keyword"
										cssClass="no-margin-bottom box-shadow extra-small-padding-left"
										placeholder="Search Equipment" />
								</div>
								<div
									class="column large-4 no-padding-left no-padding-right list-column">

									<s:select name="categoryId" list="categoryMap" theme="simple"
										headerKey="0" headerValue="Choose Category"
										cssClass="hidden-field" />


									<div class="custom dropdown" data-id="1413168221894-MX3H2">
										<a href="http://www.shiplanet.com/#" class="current">Choose
											Category</a><a href="http://www.shiplanet.com/#" class="selector"></a>
										<ul>
											<li class="selected">Choose Category</li>
											<s:iterator value="categoryMap" var="map">
												<li class="">${map.value}</li>
											</s:iterator>
										</ul>
									</div>
								</div>
								<div class="column large-2  no-padding-right no-padding-left">
									<button class="button very-small-margin-bottom expand">Search</button>
								</div>
							</div>
						</s:form>
						<div class="row">
							<div class="column large-12 text-center">
								<p
									class=" padding-bottom faded large small-margin-bottom small-line-height">
									<em>Search by name, item number, equipment type, location,
										or brand</em>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div
			class="column large-4 medium-12 pull-8 medium-push-0 header-callout1 text-center padding-top small-padding-bottom box-shadow">
			<h1 class="inverse shadow margin">
				<i class="fa fa-tags"></i> List Your Products
			</h1>
			<s:url action="uploading" namespace="" var="step1" />
			<s:a href="%{step1}"
				cssClass="button orange no-margin-bottom small-padding-left small-padding-right">Sell Your Equipment</s:a>
		</div>
	</div>
</header>